
<template>
  <view>
    <view
      class="fixbg"
      :style="{'background-image' : 'url('+ songList.al.picUrl + ')'}"
    >
    </view>
    <muscihead
      :title="songList.name"
      :icon="true"
    ></muscihead>
    <view v-show="!isloading">
      <scroll-view
        scroll-y="true"
        class="container"
      >
        <!-- 唱片图片 -->
        <view
          class="detail-play"
          @click="handleToPlay()"
        >
          <img
            :src="songList.al.picUrl"
            :class="{ 'detail-play-run' : isplayrotate }"
          >
          <text
            class="iconfont "
            :class="playicon"
          ></text>
          <view></view>
        </view>
        <!-- 歌词 -->
        <view class="detail-lyric">
          <view
            class="detail-lyric-wrap"
            :style="{ transform : 'translateY(' +  - (lyricIndex - 1) * 82  + 'rpx)' }"
          >
            <view
              class="aaa"
              :class="{ active : lyricIndex == index}"
              v-for="(item,index) in lryicList"
              :key="index"
            >{{item.lyric}}</view>
          </view>
        </view>

        <!-- 喜欢的人也喜欢 -->
        <view class="like">
          <view class="likes">
            <text>喜欢的人也喜欢</text>
          </view>
          <!-- 推荐的歌 -->
          <view
            class="big"
            v-for="(item,index) in simiList"
            :key="index"
            @click="handleToSimi(item.id)"
          >
            <view class="img">
              <img
                :src="item.album.picUrl"
                alt=""
              >
            </view>

            <view class="centen">
              <view class="songname">{{item.name}} </view>
              <view class="sq">
                <img
                  src="../../static/images/sq.png"
                  alt=""
                >
                {{item.artists[0].name}} - {{item.name}}
              </view>
            </view>

            <view class="right">
              <text class="iconfont icon-bofang"></text>
            </view>

          </view>

          <!-- 评论 -->
          <view class="pinlun">
            <!-- 精彩评论 -->
            <view class="interesting">
              <text>精彩评论</text>
            </view>
            <!-- 评论内容 -->
            <view
              class="comment"
              v-for="(item,index) in commentList"
              :key="index"
            >
              <view class="images">
                <img
                  :src="item.user.avatarUrl"
                  alt=""
                >
              </view>
              <view class="comment-content">
                <view class="content-top">
                  <view class="content-top-name">
                    <view class="name">{{ item.user.nickname }}</view>
                    <view class="date">{{ item.time | formatTime }}</view>
                  </view>
                  <view class="content-like">
                    {{ item.likedCount | fotmatCount }}
                    <text class="iconfont icon-dianzan"></text>
                  </view>
                </view>
                <view class="content-bottom-text">
                  <text>{{ item.content }}</text>
                </view>
              </view>

            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import muscihead from "../../components/musichead/musichead";
import { baseUrl } from "../../common/config";
export default {
  components: {
    muscihead,
  },
  props: {},
  data: () => ({
    id: null,
    songList: {
      al: { picUrl: "" },
    },
    simiList: [],
    commentList: [],
    lryicList: [],
    songurl: [],
    lyricIndex: 0,
    bgAudioManager: null,
    playicon: "icon-zanting",
    isplayrotate: true,
    isloading: true,
  }),

  onLoad(option) {
    uni.showLoading({
      title: "加载中",
    });
    this.isloading = true;
    this.id = option.id;
    this.getsong();
    this.getsimi();
    this.getcomment();
    this.getlryic();
    this.getsongurl();
  },
  onunLoad() {
    this.cancelLyricIndex();
  },
  onHide() {
    this.cancelLyricIndex();
  },
  methods: {
    //获取歌名
    getsong() {
      uni.request({
        url: `${baseUrl}/song/detail?ids=` + this.id, //仅为示例，并非真实接口地址。
        success: (res) => {
          // console.log(res.data);
          this.songList = res.data.songs[0];
          // console.log(this.songList.al);
        },
      });
    },
    //获取相似音乐
    getsimi() {
      uni.request({
        url: `${baseUrl}/simi/song?id=` + this.id, //仅为示例，并非真实接口地址。
        success: (res) => {
          // console.log(res.data);
          this.simiList = res.data.songs;
          this.text = "request success";
          // console.log(this.simiList);
        },
      });
    },
    // 获取评论
    getcomment() {
      uni.request({
        url: `${baseUrl}/comment/music?id=` + this.id, //仅为示例，并非真实接口地址。
        success: (res) => {
          // console.log(res.data);
          this.commentList = res.data.hotComments;
          // console.log(this.commentList);
        },
      });
    },
    //获取歌词
    getlryic() {
      uni.request({
        url: `${baseUrl}/lyric?id=` + this.id, //仅为示例，并非真实接口地址。
        success: (res) => {
          // console.log(res.data);
          let lyric = res.data.lrc.lyric;
          let result = [];
          let re = /\[([^\]]+)\]([^[]+)/g;
          lyric.replace(re, ($0, $1, $2) => {
            result.push({ time: this.formatTimeToSec($1), lyric: $2 });
          });
          this.lryicList = result;
          // console.log(this.lryicList);
        },
      });
    },
    //时间过滤器
    formatTimeToSec(time) {
      var arr = time.split(":");
      return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
    },
    //获取音乐地址
    getsongurl() {
      uni.request({
        url: `${baseUrl}/song/url?id=` + this.id, //仅为示例，并非真实接口地址。
        success: (res) => {
          // console.log(res.data);
          this.songurl = res.data.data[0];
          this.bgAudioManager = uni.getBackgroundAudioManager();

          this.bgAudioManager.title = this.songList.name;
          this.bgAudioManager.src = res.data.data[0].url || "";
          this.listenLyricIndex();
          if (this.bgAudioManager.src === "") {
            uni.showToast({
              title: "亲爱的,暂无版权",
              duration: 3000,
            });
          }

          this.bgAudioManager.onPlay(() => {
            this.playicon = "icon-zanting";
            this.isplayrotate = true;
            this.listenLyricIndex();
          });
          this.bgAudioManager.onPause(() => {
            this.playicon = "icon-bofang";
            this.isplayrotate = false;
            this.cancelLyricIndex();
          });
          this.bgAudioManager.onEnded(() => {
            this.playMusic(this.$store.state.nextId);
          });
        },
      });
      this.isloading = false;
      uni.hideLoading();
    },

    listenLyricIndex() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        for (var i = 0; i < this.lryicList.length; i++) {
          if (
            this.lryicList[this.lryicList.length - 1].time <
            this.bgAudioManager.currentTime
          ) {
            this.lyricIndex = this.lryicList.length - 1;
            break;
          }
          if (
            this.lryicList[i].time < this.bgAudioManager.currentTime &&
            this.lryicList[i + 1].time > this.bgAudioManager.currentTime
          ) {
            this.lyricIndex = i;
          }
        }
      });
    },
    cancelLyricIndex() {
      clearInterval(this.timer);
    },
    handleToPlay() {
      if (this.bgAudioManager.paused) {
        this.bgAudioManager.play();
      } else {
        this.bgAudioManager.pause();
      }
    },

    handleToSimi(id) {
      this.id = id;
      this.getsong(id);
      this.getsimi(id);
      this.getcomment(id);
      this.getlryic(id);
      this.getsongurl(id);
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-play {
  width: 580rpx;
  height: 580rpx;
  background-image: url("../../static/images/disc_bg.png");
  background-size: cover;
  margin: 214rpx auto 0 auto;
  position: relative;

  img {
    width: 370rpx;
    height: 370rpx;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    animation: 10s linear infinite move;
    animation-play-state: paused;
  }
  @keyframes move {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .detail-play-run {
    animation-play-state: running;
  }
  text {
    width: 100rpx;
    height: 100rpx;
    font-size: 100rpx;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
  view {
    width: 230rpx;
    height: 360rpx;
    background-image: url(../../static/images/needle.png);
    position: absolute;
    left: 120rpx;
    right: 0;
    top: -200rpx;
    margin: auto;
    background-size: cover;
  }
}
.detail-lyric-wrap {
  transition: 0.5s;
}
.detail-lyric {
  font-size: 32rpx;
  line-height: 82rpx;
  height: 246rpx;
  text-align: center;
  overflow: hidden;
  color: #6f6e73;
  .detail-lyric-wrap {
    .aaa {
      height: 82rpx;
    }
    .active {
      color: white;
    }
  }
}

.like {
  margin-top: 40rpx;
  overflow: hidden;
  .likes {
    color: white;
    font-size: 45rpx;
    margin-left: 40rpx;
  }
  .big {
    display: flex;
    align-items: center;
    overflow: hidden;
    .img {
      width: 100rpx;
      height: 100rpx;
      margin: 40rpx 30rpx 0 50rpx;

      img {
        border-radius: 30rpx;
        width: 100%;
        height: 100%;
      }
    }
    .centen {
      flex: 1;
      .songname {
        color: white;
        font-size: 35rpx;
      }
      .sq {
        align-items: center;
        font-size: 25rpx;
        margin-top: 10rpx;
        color: #b3b3b3;
        img {
          width: 35rpx;
          height: 25rpx;
          margin-right: 10rpx;
        }
      }
    }
    .right {
      margin-right: 30rpx;
      text {
        font-size: 70rpx;
        color: #b3b3b3;
      }
    }
  }
}

.pinlun {
  margin: 0 30rpx;
  .interesting {
    font-size: 36rpx;
    color: white;
    margin: 50rpx 0;
  }
  .comment {
    display: flex;
    margin-bottom: 28rpx;
    .images {
      width: 64rpx;
      height: 64rpx;
      margin-right: 18rpx;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .comment-content {
      flex: 1;
      .content-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20rpx;
        .content-top-name {
          color: #cbcacf;
          .name {
            font-size: 26rpx;
            // color: white;
          }
          .date {
            font-size: 18rpx;
          }
        }
        .content-like {
          font-size: 28rpx;
          color: #b3b3b3;
        }
      }
      .content-bottom-text {
        font-size: 35rpx;
        line-height: 40rpx;
        color: white;
        border-bottom: 1rpx #b3b3b3 solid;
        padding-bottom: 40rpx;
      }
    }
  }
}
</style>




